<template>
  <div id="index">
    <titleVue @close="close" :title="title_text"></titleVue>
    <div class="bottom">

      <div id="container" ref="container" @scroll="containerScroll">

        <div class="sticky_p">
          <div class="sticky">
            <div class="top_search">
              <van-search v-model="searchForm.name" @search="onSearch" :clearable="false" placeholder="搜索闲置物品">
              </van-search>
              <div @click="onSearch" class="btnsearch">搜索</div>
            </div>
            <div class="top_tab">
              <div @click="openSelect(-1, $event)">
                <div>{{ searchForm.min_date ? searchForm.min_date : '发布时间' }}
                  <div class="sj"></div>
                </div>
              </div>
              <div @click="openSelect(0, $event)">
                <div>{{ searchFormLabel.area ? searchFormLabel.area : '所在区域' }}
                  <div class="sj"></div>
                </div>
              </div>
              <div @click="openSelect(1, $event)">
                <div>{{ searchFormLabel.p_type ? searchFormLabel.p_type : '物品类型' }}
                  <div class="sj"></div>
                </div>
              </div>
<!--              <div @click="openSelect(2, $event)">
                <div>{{ searchFormLabel.jy_type ? searchFormLabel.jy_type : '交易类型' }}
                  <div class="sj"></div>
                </div>
              </div>-->
            </div>
          </div>
          <div class="list" ref="list" style="min-height: calc(100% - 14.5rem);">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list v-if="dataList.length > 0" v-model="loading" :finished="finished"
                        finished-text="没有更多了" @load="onLoad" :error.sync="error" error-text="请求失败,点击查询加载">
                <van-cell v-for="(item, index) in dataList" :key="item.id" class="card"
                          :style="(index + 1) % 2 === 0 ? 'margin-left: 0.8rem;' : ''" @click="detailClick(item)">
                  <div style="height: 100%;">
                    <div class="card_top_img" style="overflow: hidden;">
                      <img v-if="!item.imgkeys" src="./assets/img/pro.png" height="100%" width="100%"/>
                      <img v-else :src="ceph(item.imgkeys.split(',')[0])" width="100%"/>
                    </div>
                    <div class="card_content">
                      <div>{{ item.name }}</div>
                      <div style="color:#f9b452">价格 <span>{{ item.sale_price || 0 }}元</span></div>
                      <div>
                        <img src="./assets/img/man.jpeg" height="100%" width="100%"
                             style="height: 2rem;width: 2rem;border-radius: 50%;"/>

                        <span style="margin-left:.4rem">{{ item.create_user }}</span></div>
                      <div class="tag">
                        <!-- <span style="background-color: #8ed9a2;">移互部</span> -->
                        <span style="background-color: #f0a6c7;margin-left: .4rem;">{{ item.area || ' ' }}</span>
                        <span style="background-color: #6dc9fc;margin-left: .4rem;">{{ item.jy_type || ' ' }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="isEnd" v-if="item.status === '1'">
                    <div class="end_text">
                      交易成功
                    </div>
                  </div>
                </van-cell>
              </van-list>
              <van-empty v-else description="暂无物品"/>
            </van-pull-refresh>
          </div>
        </div>

      </div>
      <bottomMenu/>
    </div>

    <!-- 全部  弹窗-->
    <van-popup v-model="query_show" position="bottom">
      <van-picker v-if="currentOpen != -1" show-toolbar :columns="queryList[currentOpen]" @confirm="queryChange"
                  @cancel="query_show = false"/>
      <van-datetime-picker v-else @confirm="queryChange" @cancel="query_show = false" type="date" title="选择年月日"
                           :max-date="new Date()" :min-date="new Date(2023,0,1)"/>
    </van-popup>


  </div>
</template>

<script>

import titleVue from '@/appview/common/title.vue';
import bottomMenu from '@/appview/common/bottomMenu.vue';
import util from './utils/util';
import {Toast} from 'vant';
// import util from './utils/util';
// import { Toast } from 'vant';
export default {
  name: "index",
  components: {
    titleVue,
    bottomMenu
  },
  data() {
    return {
      title_text: "我的APP",
      searchForm: {
        name: null,
        // tel: JSON.parse(util.getCookie("emp_data")).telNum
      },
      searchFormLabel: {},
      queryType: {
        '-1': 'min_date',
        '0': 'area',
        '1': 'p_type',
        '2': 'jy_type',
      },
      dataList: [],
      loading: false,
      finished: false,
      refreshing: false,
      error: false,
      page: {
        size: 16,
        page: 1
      },
      lastLetter: {},
      query_show: false,
      dept_list: [],
      count: {},
      queryList: [
        // [
        //     '黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '浦东新区', '闵行区', '宝山区', '嘉定区', '金山区', '松江区', '青浦区', '奉贤区', '崇明区'
        // ],

        // ['交易', '交换', '赠送'],
        // ['书籍', '食品', '服装', '箱包', '数码', '电器', '母婴', '其它闲置'],
      ],
      currentOpen: null,

    }
  },

  mounted() {
    // 初始化数据
    this.onLoad();
    this.selectQueryDic();
    window.viewWillAppear = () => {
      this.onLoad(true);
    };
  },
  methods: {
    close() {// 关闭当前窗口
      this.va.close();
    },
    onSearch() {
      this.onLoad(true);
    },
    containerScroll(e) {
      let el = e.currentTarget;

      if (el.scrollTop == 0) {
        this.$refs.list.style['min-height'] = 'calc(100% - 14.5rem)'
      } else if (el.scrollTop + el.clientHeight + 10 > el.scrollHeight) {
        this.$refs.list.style['min-height'] = 'calc(100% - 4.5rem)'
      }
    },
    openSelect(tab, event) {
      this.currentOpen = tab;
      this.query_show = true;
      event.stopImmediatePropagation()
    },

    selectQueryDic() {
      this.axios.post('app/product/queryDic', ['area', 'jy_type', 'p_type']).then(({data: res}) => {
        if (res && res.success) {
          this.queryList = Object.values(res.data);
          this.queryList.forEach(item => {
            item.unshift({text: "全部", value: undefined})
          })
        }

      }).catch(() => {
        Toast("查询条件初始化失败")
      })

    },
    // 初始化数据
    onLoad(reload) {
      if (reload || this.refreshing) {
        this.loading = true;
        this.page.page = 1;
      }
      const url = this.$apiUrl + '/product/queryProductList';
      this.$http.post(url, this.searchForm, {params: this.page}).then(({data: res}) => {
        console.log(res)
        if (res && res.success) {
          let list = res.data.content;
          if (!reload && !this.refreshing) {
            list = this.dataList.concat(list)
          }
          if (list.length < this.page.size) {
            this.finished = true;
          }
          this.page.page++;
          this.error = false;
          this.dataList = list;
        } else {
          this.error = true;
        }
      }).catch(() => {
        this.error = true;
      }).finally(() => {
        this.loading = false;
        if (this.refreshing) {
          this.refreshing = false;
        }
      })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.searchForm = {};
      this.searchFormLabel = {};
      // 重新加载数据
      this.onLoad();
    },

    showDeptSelect() {
      this.query_show = true;
    },
    queryChange(val) {
      if (this.currentOpen === -1) {
        this.searchForm[this.queryType[this.currentOpen]] = new Date(val).format('yyyy-MM-dd');
      } else {
        this.searchFormLabel[this.queryType[this.currentOpen]] = val.value ? val.text : null;
        // this.searchForm[this.queryType[this.currentOpen]] = val.value;
        this.searchForm[this.queryType[this.currentOpen]] = val.value ? val.text : null;

      }

      this.query_show = false;
      this.onLoad(true)
    },
    detailClick(item) {
      if (item.status === '1') {
        return;
      }
      //item.zanState = zanState;
      window.open("#/app/detailPage?id=" + item.id);
      //window.detail = item;
    },

  }
};
</script>
<style scoped>
#index {
  height: 100%;
  font-size: 1rem;
}

.bottom {
  height: calc(100% - 2.75rem);
  position: relative;
  overflow: hidden;
  background: url(../../assets/images/bg.png) no-repeat;
  background-size: 100% 100%;
  top: -2px;
}

#container {
  height: calc(100% - 3.2rem);
  overflow-y: auto;
  overflow-x: hidden;
  width: calc(100% + .4rem);
  position: relative;
  /* background: #ecf8fe; */
}

#container .card .card_top_img {
  height: 50%;
}

#container .card .card_content {
  padding: 0 .64rem .4rem;
  font-size: .8rem;
  line-height: 1.2;
}

#container .card .card_content > div {
  margin-top: .6rem;
  font-weight: bold;

}

#container .card .tag {
  color: #fff;

}

#container .card .tag > span {
  /* display: inline-block; */
  /* height: 1.2rem; */
  width: 28%;
  line-height: 1.2rem;
  padding: .2rem .4rem;
  text-align: center;
}

#container .card > div {
  height: 100%;
}

.app_top {
  height: 10rem;
}

#container .sticky {
  /* height: calc(100% - 10rem); */
  position: sticky;

  top: -2px;
  padding: 0 1rem 0 .6rem;
  background: #ecf8fe;
  padding-top: .4rem;
}

#container .sticky_p {
  margin-top: 10rem;
  height: 100%;
  position: relative;
}

#container .top_tab {
  margin-top: .4rem;
  height: 2rem;
  line-height: 2rem;
  font-size: .8rem;
  display: flex;
  font-weight: bold;
  justify-content: space-between;

}

#container .top_tab .sj {
  border-top: .6rem solid #f6960e;
  border-left: .4rem solid transparent;
  border-right: .4rem solid transparent;

  display: inline-block;
  margin-left: .2rem;
}

#container .top_search {
  position: relative;
}

#container .top_search >>> .van-search {
  padding: 0;
}

#container .btnsearch {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 1rem;
  width: 3.2143rem;
  height: 1.4rem;
  text-align: center;
  border-radius: 0.5rem;
  background-color: #97C0FB;
  color: #f7f7f7;

  line-height: 1.4rem;
  font-size: .8rem;
}

#container .top_search >>> .van-search__content {
  border-radius: 10px;
}

#container .top_search >>> .van-search {
  background: transparent;
  padding-left: 0;
}


#container .list {
  background: #ecf8fe;
  width: 100%;
  transition: all 1s;
  padding: .8rem 1rem 0 .6rem;
  overflow-y: auto;
  position: sticky;
}

#container .list .card {
  width: calc(50% - .4rem);
  display: inline-block;
  height: 16.4rem;
  border-radius: .4rem;
  padding: 0;
  position: relative;
}

.isEnd {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #eabcbc;
  opacity: .8;
  top: 0;
  z-index: 3;
}

.isEnd .end_text {
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-style: oblique;
}

.bottom .list .vant-list {
  overflow: hidden;

}


.list >>> .van-list .van-list__loading::before {
  content: '';
  display: block;
  clear: both;
}

.list >>> .van-list .van-list__error-text::before {
  content: '';
  display: block;
  clear: both;
}

.list >>> .van-list .van-list__finished-text::before {
  content: '';
  display: block;
  clear: both;
}

.list >>> .van-list__error-text,
.list >>> .van-list__finished-text,
.list >>> .van-list__loading {
  font-size: .8rem;
}

.list >>> .van-pull-refresh {
  min-height: 100%;
  position: absolute;
  width: calc(100% - 1.6rem);
}
</style>
